
<template>
  <div style="border: 1px solid #ccc; width: 1304px">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 90%"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
export default {
  props: {
    content: {
      type: String,
      default: "",
    },
  },
  components: { Editor, Toolbar },
  watch: {
    content: {
      handler: function (newValue, oldValue) {
        this.html = newValue;
      },
      deep: true, // This is to watch any change within the object (Properties of the object).
      immediate: true, // This is to run the handler immediately after the component is created.
    },
  },
  data() {
    return {
      html: "",
      editor: null,
      toolbarConfig: {
        excludeKeys: [
          "blockquote",
          "group-more-style",
          "todo",
          "emotion",
          "codeBlock",
          "group-video",
        ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          // MENU_RCONF
          fontFamily: {
            fontFamilyList: [
              // 元素支持两种形式
              //   1. 字符串；
              //   2. { name: 'xxx', value: 'xxx' }
              "黑体",
              "楷体",
              { name: "仿宋", value: "仿宋" },
              "Arial",
              "Tahoma",
              "Verdana",
            ],
          },
          lineHeight: {
            lineHeightList: [
              "1em",
              "1.5em",
              "2em",
              "2.5em",
              "3em",
              "3.5em",
              "4em",
              "4.5em",
              "5em",
            ],
          },
          // 配置上传图片
          uploadImage: {
            fieldName: "file",
            //单个文件的最大体积限制，默认为 2M
            maxFileSize: 5 * 1024 * 1024, // 1M
            //最多可上传几个文件，默认为 100
            maxNumberofFiles: 100,
            //选择文件时的类型限制，默认为 〔"image/*"了。如不想限制，
            // allowedFileTypes: ["image/*"],
            allowedFileTypes: [],
            //自定义上传参数，例如传递验证的 token 等。参数会被添加到
            meta: {
              // token:'xxx',
              // otherKey: 'yyy'
            },
            //将 meta 拼接到 url 参数中，默认 false
            metawithUrl: false,
            //自定义增加 http header
            headers: {
              // Accept: '',
              // otherKey: 'Xxx'
            },
            //跨域是否传递 cookie，默认为 false
            withCredentials: true,
            //超时时间，默认为 10 秒
            timeout: 10 * 1000, //10 秒
            customUpload: this.update,
          },
        },
      },
      mode: "default", // simple or 'default'
    };
  },
  methods: {
    onChange(editor) {
      this.$emit("quillChange", this.html);
      // const toolbar = DomEditor.getToolbar(editor);
      // console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
    },
    update(file, insertFn) {
      // file 即选中的文件
      // 自己实现上传，并得到图片 url alt href
      // console.log("获取参数", file);
      const formData = new FormData(); // 创建 FormData 实例
      formData.append("file", file);
      // axios
      // .post("http://47.113.179.102:8080/image/upload", formData, {
      axios
        .post("https://www.diantangkeji.com/server/image/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data", // 设置请求头
          },
        })
        .then((response) => {
          // 处理响应
          console.log("File uploaded successfully:", response);
          insertFn(response.result, file.name, response.result);
        })
        .catch((error) => {
          // 处理错误
          console.error("Error uploading file:", error);
        });
    },

    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
